<template>
    <Modal
        v-model="visible"
        class="DModal"
        class-name="vertical-center-modal"
        :width="width"
        @on-cancel="close"
        :mask-closable="false"
        :draggable="true"
        :styles="{top: '40px'}"
    >
        <div class="DModal-header" slot="header">
            <div class="DModal-header-left"></div>
            <div class="DModal-header-center"></div>
            <div class="DModal-header-right"></div>
            <div class="DModal-view-content">
                <slot name="header">
                    <span class="DModal-header-icon"></span>
                    {{title}}
                </slot>
            </div>
        </div>
        <div class="DModal-content">
            <div class="DModal-content-left"></div>
            <div class="DModal-content-center"></div>
            <div class="DModal-content-right"></div>
            <div class="DModal-view-content" :style="{height:height + 'px'}">
                <slot name="content" v-if="contentVisible"></slot>
            </div>
        </div>
        <div class="DModal-footer" slot="footer">
            <div class="DModal-footer-left"></div>
            <div class="DModal-footer-center"></div>
            <div class="DModal-footer-right"></div>
            <div class="DModal-view-content">
                <slot name="footer"></slot>
            </div>
        </div>
    </Modal>
</template>

<script>

export default {
    data() {
        return {
            contentVisible: this.value,
            visible: this.value,
        }
    },
    props: {
        height: {
            type: Number,
            default: 760
        },
        width: {
            type: Number,
            default: 1200
        },
        value: {
            type: Boolean,
            default: false
        },
        title: {
            type: [String, Number],
            default: ''
        },
    },
    watch: {
        value(val) {
            this.visible = val;
            if (val) {
                this.contentVisible = val;
            } else {
                setTimeout(() => {
                    this.contentVisible = false;
                }, 200);
            }
        },
    },
    methods: {
        close() {
            this.visible = false;
            this.$emit('input', false);
            this.$emit('on-cancel');
        },
    }
}
</script>

<style lang="less">
// .vertical-center-modal {
//     display: flex;
//     align-items: center;
//     justify-content: center;

//     // .ivu-modal {
//     //     top: 0;
//     // }
// }

.DModal {
    &-content-left,
    &-content-center,
    &-content-right {
        pointer-events: none;
        bottom: 0;
        top: -4px;
        position: absolute;
    }
    &-content {
        .DModal-view-content {
            overflow-y: auto;
        }
        min-height: 200px;
        &-left {
            width: 14px;
            left: 0;
            background-image: url(./WIN_C_LR.png);
        }
        &-right {
            width: 14px;
            right: 0;
            transform: rotateY(180deg);
            background-image: url(./WIN_C_LR.png);
        }
        &-center {
            left: 14px;
            right: 14px;
            background-image: url(./WIN_C_C.png);
        }
        &-title {
            position: relative;
        }
    }
    &-header-left,
    &-header-center,
    &-header-right {
        pointer-events: none;
        top: 0;
        height: 38px;
        position: absolute;
    }
    &-header {
        &-left {
            width: 14px;
            left: 0;
            background-image: url(./WIN_T_LR.png);
        }
        &-right {
            width: 14px;
            right: 0;
            transform: rotateY(180deg);
            background-image: url(./WIN_T_LR.png);
        }
        &-center {
            left: 14px;
            right: 14px;
            background-image: url(./WIN_T_C.png);
        }
        &-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            background-image: url(./WIN_ICON.png);
        }
    }

    &-footer-left,
    &-footer-center,
    &-footer-right {
        pointer-events: none;
        bottom: 0;
        height: 84px;
        position: absolute;
    }
    &-footer {
        &-left {
            width: 143px;
            left: 0;
            background-image: url(./WIN_B_L.png);
        }
        &-right {
            width: 14px;
            right: 0;
            background-image: url(./WIN_B_R.png);
        }
        &-center {
            left: 143px;
            right: 14px;
            background-image: url(./WIN_B_C.png);
        }
        &-title {
            position: relative;
        }
    }
    &-view-content {
        position: relative;
    }
    .ivu-modal {
        &-close {
            top: 1px;
            right: 4px;
        }
        &-content {
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }
        &-header,
        &-body,
        &-footer {
            position: relative;
            border: none;
        }
        &-header {
            padding-top: 10px;
            padding-bottom: 18px;
        }
        &-footer {
            .DModal-view-content {
                height: 32px;
            }
        }
        &-body {
            padding: 0px 16px 5px 16px;
        }
    }
}
</style>